<template>
  <div>
    <application-header
      @getTime="handleGetTime"
      @getChannel="handleGetChannel"
      @getVersion="handleGetVersion"
    />
    <div class="newUsers-container">
      <div class="newUsers-title">
        <span>新增趋势</span>
      </div>
      <div class="newUsers-tabs">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="新增用户">
            <div class="chart-wrapper">
              <line-chart
                name="新增用户数"
                :height="hourHeight"
                :chartData="chartData"
                xAxisName="时间"
              />
              <el-link
                style="margin-left: 16px"
                @click="changePutAwayStatus"
                type="primary"
                :underline="false"
                >{{ putAwayName }}明细数据<i
                  :class="[
                    isPutAway ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                    'el-icon--right',
                  ]"
                ></i
              ></el-link>
              <div class="newUsers-tables">
                <a-table
                  :pagination="pagination"
                  v-if="isPutAway"
                  rowKey="id"
                  :columns="columns"
                  :data-source="data"
                  @change="onChangePagination"
                ></a-table>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
        <a-radio-group style="display: none;" v-model="value" @change="onChange">
          <a-radio-button value="a" disabled> 小时 </a-radio-button>
          <a-radio-button value="b"> 天 </a-radio-button>
          <a-radio-button value="c" disabled> 周 </a-radio-button>
          <a-radio-button value="d" disabled> 月 </a-radio-button>
        </a-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ApplicationHeader from "@/components/ApplicationHeader";
import LineChart from "@/echartsComponent/LineChart.vue";
import { getYearMonthDayFromOne, getYearMonthDay, getFromDay1ToDay2 } from "@/utils/functions";
import { selectNewUserCountByDate } from "@/api/newUsers";

const columns = [
  {
    title: "日期",
    dataIndex: "date",
  },
  {
    title: "新增用户数",
    dataIndex: "count",
  },
];

function onChangePagination(pagination, filters, sorter) {
  console.log("params", pagination, filters, sorter);
}

export default {
  name: "NewUsers",
  data() {
    return {
      value: "a",
      hourHeight: "350px",
      chartData: {
        xAxisData: [],
        yAxisData: [],
      },
      pagination: {
        pageSize: 10,
        total: 0,
      },
      isPutAway: true,
      data: [],
      columns,
      selectNewUserCountByDateData: {
        startDate: null,
        endDate: null,
        channel: null,
        version: null,
        appKey: "",
      },
    };
  },
  components: {
    ApplicationHeader,
    LineChart,
  },
  computed: {
    putAwayName() {
      return this.isPutAway ? "收起" : "展开";
    },
    // applicationId() {
    //   return this.$store.state.application.applicationId
    // },
    // ...mapState('application',['applicationId'])
    // ...mapState('application', {
    // 	applicationId: 'applicationId'
    // })
    // ...mapState({
    // 	applicationId: (state) => state.application.applicationId
    // })
    // ...mapState('application', {
    // 	applicationId: (state) => state.applicationId
    // })
    ...mapGetters(["applicationId"]),
  },
  methods: {
    async handleGetTime(msg) {
      this.selectNewUserCountByDateData.startDate = msg[0];
      this.selectNewUserCountByDateData.endDate = msg[1];
      await this.getNewUserCountByDate(this.selectNewUserCountByDateData);
    },
    async handleGetChannel(msg) {
      this.selectNewUserCountByDateData.channel = msg.key;
      await this.getNewUserCountByDate(this.selectNewUserCountByDateData);
    },
    async handleGetVersion(msg) {
      this.selectNewUserCountByDateData.version = msg.key;
      await this.getNewUserCountByDate(this.selectNewUserCountByDateData);
    },
    onChangePagination,
    changePutAwayStatus() {
      this.isPutAway = !this.isPutAway;
    },
    callback(key) {
      console.log(key);
    },
    onChange(e) {
      console.log(`checked = ${e.target.value}`);
    },
    async getNewUserCountByDate(data) {
      // 每次请求，清空数据
      this.chartData.xAxisData.length = 0;
      this.chartData.yAxisData.length = 0;
      let res;
      try {
        res = await selectNewUserCountByDate(data);
      } catch (error) {
        console.log(error);
      }
      let { code } = res;
      if (code == 0) {
        let dataM = getFromDay1ToDay2(this.selectNewUserCountByDateData.startDate, this.selectNewUserCountByDateData.endDate);
        // 做些什么
        if (res.data.length == 0) {
          dataM.forEach(item => {
            this.chartData.xAxisData.push(item);
            this.chartData.yAxisData.push(0);
          })
          this.data = res.data;
          this.pagination.total = 0;
        } else {
          res.data.forEach((item, index) => {
            item["id"] = index;
          });
          this.data = res.data.reverse();
          this.pagination.total = res.data.length;
          for(let i = 0; i < dataM.length; i++) {
            console.log(dataM[i])
            let flag = false;
            let index1;
            for(let j = 0; j < res.data.length; j++) {
              if (res.data[j]['date'] == dataM[i]) {
                flag = true;
                index1 = res.data[j]['count']
                break;
              }
            }
            if (flag) {
              this.chartData.xAxisData.push(dataM[i]);
              this.chartData.yAxisData.push(index1);
            } else {
              this.chartData.xAxisData.push(dataM[i]);
              this.chartData.yAxisData.push(0);
            }
          }
        }
      }
    },
  },
  async mounted() {
    this.selectNewUserCountByDateData.appKey = this.applicationId;
    this.selectNewUserCountByDateData.startDate = getYearMonthDayFromOne();
    this.selectNewUserCountByDateData.endDate = getYearMonthDay();
    await this.getNewUserCountByDate(this.selectNewUserCountByDateData);

    // setTimeout(() => {
    //   this.chartData.xAxisData = ['a', 'b', 'c', 'd', 'e', 'f'];
    //   this.chartData.yAxisData = [3, 2, 9, 1, 4, 4];
    // }, 2000)
  },
};
</script>

<style lang="scss" scoped>
.newUsers-container {
  margin: 24px 22px 20px;
  padding: 24px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  .newUsers-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 32px;
    color: #000;
  }
  .newUsers-tabs {
    position: relative;
    >>> .ant-tabs {
      .ant-tabs-bar {
        border-bottom: none;
        .ant-tabs-nav-container {
          .ant-tabs-nav-wrap {
            .ant-tabs-tab {
              padding: 12px 0;
            }
            .ant-tabs-ink-bar {
              width: 56px;
            }
          }
        }
      }
      .newUsers-tables {
        margin: 24px auto 16px;
      }
    }
    >>> .ant-radio-group {
      position: absolute;
      top: 3px;
      right: 0px;
      padding: 4px 0;
      .ant-radio-button-wrapper {
        margin-right: 8px;
      }
    }
    // chart
    .chart-wrapper {
      background: #fff;
      padding: 16px 0 0;
      margin-bottom: 32px;
    }
  }
}
</style>

